<%@ page import="DAO.UserDao" %>
<%@ page import="DataClass.User" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="static/css/bootstrap.min.css">
    <script src="static/js/jquery.min.js"></script>
    <script src="static/js/bootstrap.min.js"></script>
    <style>
        body {
            background-image: url(static/img/background.png);
            height: 100%;
            width: 100%;
            background-repeat: no-repeat;
            background-size: cover;
        }

        .page-container {
            margin: 250px auto 0 auto;
            background: rgba(0, 0, 0, .5);
            width: 600px;
            height: 500px;
        }

        h2 {
            font-size: 30px;
            font-weight: 700;
            text-shadow: 0 1px 4px rgba(0, 0, 0, .9);
            padding-top: 60px;
            color: white;
            text-align: center;
        }

        input {

            width: 400px;
            height: 50px;
            margin-top: 40px;
            padding: 0 15px;
            background: rgba(45, 45, 45, .3);
            border-radius: 6px;
            border: 1px solid #3d3d3d;
            border: 1px solid rgba(255, 255, 255, .25);
            box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .7) inset;
            font-family: sans-serif;
            font-size: 16px;
            color: #fff;
            text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
        }

        input:-moz-placeholder {
            color: #fff;
        }

        input:-ms-input-placeholder {
            color: #fff;
        }

        input::-webkit-input-placeholder {
            color: #fff;
        }

        input:focus {
            outline: none;
            -moz-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1) inset, 0 2px 7px 0 rgba(0, 0, 0, .2);
            -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1) inset, 0 2px 7px 0 rgba(0, 0, 0, .2);
            box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1) inset, 0 2px 7px 0 rgba(0, 0, 0, .2);
        }

        button {
            cursor: pointer;
            width: 300px;
            height: 50px;
            margin-top: 40px;
            padding: 0;
            background: #ef4300;
            -moz-border-radius: 6px;
            -webkit-border-radius: 6px;
            border-radius: 6px;
            border: 1px solid #ff730e;
            -moz-box-shadow: 0 15px 30px 0 rgba(255, 255, 255, .25) inset, 0 2px 7px 0 rgba(0, 0, 0, .2);
            -webkit-box-shadow: 0 15px 30px 0 rgba(255, 255, 255, .25) inset, 0 2px 7px 0 rgba(0, 0, 0, .2);
            box-shadow: 0 15px 30px 0 rgba(255, 255, 255, .4) inset, 0 2px 7px 0 rgba(0, 0, 0, .2);
            font-family: Arial, sans-serif;
            font-size: 14px;
            font-weight: 700;
            color: #fff;
            text-shadow: 0 1px 2px rgba(0, 0, 0, .1);
            -o-transition: all .2s;
            -moz-transition: all .2s;
            -webkit-transition: all .2s;
            -ms-transition: all .2s;
        }

        button:hover {
            -moz-box-shadow: 0 15px 30px 0 rgba(255, 255, 255, .15) inset, 0 2px 7px 0 rgba(0, 0, 0, .2);
            -webkit-box-shadow: 0 15px 30px 0 rgba(255, 255, 255, .15) inset, 0 2px 7px 0 rgba(0, 0, 0, .2);
            box-shadow: 0 15px 30px 0 rgba(255, 255, 255, .15) inset, 0 2px 7px 0 rgba(0, 0, 0, .2);
        }

        button:active {
            -moz-box-shadow: 0 15px 30px 0 rgba(255, 255, 255, .15) inset, 0 2px 7px 0 rgba(0, 0, 0, .2);
            -webkit-box-shadow: 0 15px 30px 0 rgba(255, 255, 255, .15) inset, 0 2px 7px 0 rgba(0, 0, 0, .2);
            box-shadow: 0 5px 8px 0 rgba(0, 0, 0, .1) inset, 0 1px 4px 0 rgba(0, 0, 0, .1);
            border: 0px solid #ef4300;
        }

        .register {
            margin-top: 25px;
            text-align: center;
        }

        span {
            color: #C0C0C0;
        }
		.info {
			position: absolute;
			top: 195px;
			left: 55px;
			width: 500px;
			height: 20px;
			text-align: left;
			line-height: 20px;
			text-indent: 10px;
			font-size: 14px;
			color: #c5c5c5;
		}

	</style>
    <!--滑动验证-->
    <style>
        .scrollCheck {
            position: absolute;
            width: 79%;
            height: 42%;
            top: 120px;
            left: 55px;
            border: 1px solid transparent;
            background-color: antiquewhite;
            z-index: 5;
            display: none;
        }

        .scroll {
            position: absolute;
            top: 174px;
            left: 17.5px;
            height: 32px;
            width: 360px;
            border-radius: 16px;
            background-color: #f5faff;
            line-height: 32px;
            text-align: center;
            color: #10bafc;
            font-size: 14px;
            background-color: #f5faff;
            user-select: none;
        }

        #scroll2 {
            width: 0px;
            color: white;
            background-color: #41c2fc;
        }

        #bbox {
            position: absolute;
            top: 0px;
            left: 0px;
            z-index: 5;
            width: 32px;
            height: 32px;
            border-radius: 16px;
            background-color: #d8eaf1;
        }

        .bow {
            position: absolute;
			top: 9px;
			left: 6px;
            border: 3px solid #41c2fc;
            width: 15px;
            height: 15px;
            border-left: none;
            border-bottom: none;
            transform: rotate(45deg);
        }

        #img_ {
            position: relative;
            margin: 25px auto;
            width: 360px;
            height: 140px;
        }

        .textwan {
            position: absolute;
            top: -2px;
            left: 17.5px;
            height: 30px;
            font-size: 14px;
            line-height: 30px;
        }

        .changeone {
            position: absolute;
            height: 30px;
            width: 50px;
            top: -42px;
            left: 319px;
            font-size: 13px;
            color: rgb(70, 135, 231);
            line-height: 30px;
            /* background-image: url(static/img/refresh2.png); */
            background-repeat: no-repeat;
            background-position: 1px 6px;
            /* padding-left: 6px; */
            background-color: transparent;
            border: none;
            cursor: pointer;
        }

        #close {
			position: absolute;
			top: -40px;
			left: 380px;
			height: 13px;
			width: 13px;
			line-height: 15px;
			padding-left: 1px;
			border: none;
			cursor: pointer;
        }

        .sanjiao {
            position: absolute;
            top: 209px;
            left: 180px;
            height: 0px;
            width: 0px;
            border: 10px solid red;
            border-color: #d6d6d6 transparent transparent transparent;
        }
    </style>
    <script>
        var X = -1;
        var isOK = false;
        var pngno = 0;
        var isClose = true;
        var smallPng = ["c0_0.png", "c1_1.png", "c2_2.png", "c3_3.png", "c4_4.png",
            "c5_5.png", "c6_6.png", "c7_7.png", "c8_8.png", "c9_9.png",
            "c10_10.png", "c11_11.png", "c12_12.png", "c13_13.png", "c14_14.png"
        ];
        var bigPng = ["c0.png", "c1.png", "c2.png", "c3.png", "c4.png",
            "c5.png", "c6.png", "c7.png", "c8.png", "c9.png",
            "c10.png", "c11.png", "c12.png", "c13.png", "c14.png"
        ];
        var tops = [21, 23, 68, 34, 44, 56, 64, 87, 21, 47, 19, 78, 35, 21, 23];
        var lefts = [174, 125, 140, 74, 76, 110, 146, 72, 118, 150, 148, 71, 185, 129, 147];

        function onloadPng() {
            var temp = pngno;
            pngno = Math.floor(Math.random() * 15);
            while (temp === pngno) {
                pngno = Math.floor(Math.random() * 15);
            }
            var smallp = document.getElementById("_1_");
            document.getElementById("_1").src = "static/img/" + bigPng[pngno];
            smallp.src = "static/img/" + smallPng[pngno];
            smallp.style.top = tops[pngno] + "px";
        }

        function close_() {
            var h = document.getElementsByClassName("scrollCheck")[0];
            h.style = "display:none;";
            isClose = true;
        }

        function change() {
            onloadPng();
        }

        window.onload = function () {
            var cilcked = 0;
            var oDiv = document.getElementById("bow");
            var _1_ = document.getElementById("_1_");
            var bbox = document.getElementById("bbox");
            oDiv.onmousedown = function () {
                var startX = document.getElementById("scroll").getBoundingClientRect().left;
                cilcked = 1;
                if (cilcked) {
                    document.onmousemove = function (ev) {
                        var event = window.event || ev;
                        X = event.clientX - startX;
                        if (X <= 0) X = 0;
                        if (X >= 328) X = 328;
                        bbox.style.left = X + "px";
                        _1_.style.left = (X * 1.0 / 328 * 310) + "px";
                        document.getElementById("scroll2").style.width = (X + 22) + "px";
                    }
                }
                document.onmouseup = function () {
                    document.onmousemove = null;
                    cilcked = 0;
                    if ((X * 1.0 / 328 * 310) >= (lefts[pngno] - 5) && (X * 1.0 / 328 * 310) <= (lefts[pngno] + 5)) {
                        isOK = true;
                        document.getElementById("scroll2").style.width = "360px";
                        document.getElementById("bbox").style = "display:none;";
                        document.getElementById("scroll2").innerHTML = "拼接成功";
                        /*这里写拼接成功干嘛*/
						setTimeout(function () {//延时
							document.getElementsByClassName("scrollCheck")[0].style.display="none";
                            var name=document.getElementsByClassName("username")[0].value;
                            var password=document.getElementsByClassName("password")[0].value;
<%--                            <%--%>
<%--                            String uname=request.getParameter("name"),upassword=request.getParameter("password");--%>
<%--                            User u=new User(uname,upassword);--%>
<%--                            UserDao dao=new UserDao();--%>
<%--                            dao.Insert(u);%>--%>
                            var url = "addUserServlet";
                            var params = "user_name="+encodeURI(name)+"&password="+encodeURI(password);
                            sendRequest(url,params,"POST",function () {
                                alert("注册成功！");
                                location.href="index.jsp";
                            });
						},1000);
                    } else {
                        document.getElementById("scroll2").style.backgroundColor = "#ff5b57";
                        setTimeout(function () {
                            document.getElementById("bbox").style.left = "0px";
                            document.getElementById("_1_").style.left = "0px";
                            document.getElementById("scroll2").style.width = "0px";
                            document.getElementById("scroll2").style.backgroundColor = "#41c2fc";
                            onloadPng();
                        }, 500);
                    }
                    document.onmouseup = null;
                }
            }
        }
		function isuserOK() {
			var usr = document.getElementsByClassName("username")[0].value;
			var info_ = document.getElementsByClassName("info")[0];
			if (usr.length == 0) {
				info_.innerHTML = "用户名不能为空";
				info_.style.color = "#ff9911";
				return false;
			}
			tag = true;
			for (var i = 0; i < usr.length; i++) {
				if (usr[i] <= '/') {
					tag = false;
					break;
				}
				if (usr[i] >= ':' && usr[i] <= '@') {
					tag = false;
					break;
				}
				if (usr[i] >= '[' && usr[i] <= '^' || usr[i] == '`') {
					tag = false;
					break;
				}
				if (usr[i] >= '{' && usr[i] <= '~') {
					tag = false;
					break;
				}
			}
			if (tag == false) {
				info_.innerHTML = "用户名不能包括非法字符";
				info_.style.color = "#ff9911";
				return false;
			}
			info_.style.color = "#c5c5d2";
			info_.innerHTML = "用户名可以使用数字,下划线,字母,汉字";
			return true;
		}

		function ispwdOK() {
			var pwd = document.getElementsByClassName("password")[0].value;
			var info_ = document.getElementsByClassName("info")[1];
			if (pwd.length < 8) {
				info_.innerHTML = "密码不能少于八位";
				info_.style.color = "#ff9911";
				return false;
			}
			var tag = false;
			for (var i = 0; i < pwd.length; i++) {
				if (!(pwd[i] >= '0' && pwd[i] <= '9' || pwd[i] >= 'A' && pwd[i] <= 'Z' || pwd[i] >= 'a' && pwd[i] <= 'z' || pwd[i] == '_')) {
					info_.innerHTML = "密码仅可以包含字母、数字、下划线";
					info_.style.color = "#ff9911";
					return false;
				}
				if (pwd[i] >= 'A' && pwd[i] <= 'Z' || pwd[i] >= 'a' && pwd[i] <= 'z') tag = true;
			}
			if (!tag) {
				info_.innerHTML = "密码不能为纯数字";
				info_.style.color = "#ff9911";
				return false;
			}
			info_.innerHTML = "密码必须包含英文字母和数字,不能少于8位,还可以使用下划线";
			info_.style.color = "#c5c5d2";
			return true;
		}

		function registed() {
			if(isuserOK()&&ispwdOK()){
				document.getElementsByClassName("scrollCheck")[0].style.display="block";
			}
		}
        function createXHR() {
            //创建XMLHttpRequest对象实例
            if (window.XMLHttpRequest) {
                httpRequest = new XMLHttpRequest();
            } else if (window.ActiveXObject) {
                try {
                    httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
                } catch (e) {
                    try {
                        httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
                    } catch (e) {
                        httpRequest = null;
                    }
                }
            }
            if (!httpRequest) {
                //获取失败
                alert("获取失败");
            }
        }

        function sendRequest(url, params, method, handler) {
            createXHR();
            if (!httpRequest) return false;
            httpRequest.onreadystatechange = handler;
            if (method == "GET") {
                httpRequest.open(method, url + "?" + params, true);
                httpRequest.send(null);
            }
            if (method == "POST") {
                httpRequest.open(method, url, true);
                httpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                httpRequest.send(params);
            }
        }
    </script>
</head>
<body>
<%--<div class="page-container">--%>
<%--			<form action="registerServlet" method="post" style="text-align: center;">--%>
<div style="text-align: center;margin:100px auto;position: relative;width: 500px;height:500px;">
    <h2>欢迎来到图书管理系统</h2>
    <span class="glyphicon glyphicon-user"></span>&nbsp;
    <input type="text" name="name" class="username" placeholder="请输入用户名" onkeyup="isuserOK()">
    <div class="info">用户名可以使用数字,下划线,字母,汉字</div>
    <br>
    <span class="glyphicon glyphicon-lock"></span>
    <input type="password" name="password" class="password" placeholder="请输入密码" onkeyup="ispwdOK()">
    <div class="info" style="top:285px;">密码必须包含英文字母和数字,不能少于8位,还可以使用下划线</div>
    <br>
    <div class="scrollCheck">
        <div class="textwan">完成拼图验证</div>
        <button class="changeone" onclick="change()">换一张</button>
        <button id="close" onclick="close_()">×</button>
        <div id="img_">
            <img src="static/img/c14.png" id="_1">
            <img id="_1_" src="static/img/c14_14.png" style="position: absolute;top:23px;left:0px;">
        </div>
        <div id="scroll" class="scroll">
            向右滑动完成拼图
            <div id="bbox">
                <div id="bow" class="bow"></div>
            </div>
        </div>
        <div class="scroll" id="scroll2"></div>
        <div class="sanjiao"></div>
    </div>
    <br>
    <div class="button" style="text-align: center;">
        <button onclick="registed()">register</button>
    </div>
</div>
<%--			</form>--%>
<%--</div>--%>

</body>
</html>
















<%--<span class="glyphicon glyphicon-user"></span>&nbsp;--%>
<%--<input type="text" name="name" class="username" placeholder="请输入用户名" onkeyup="isuserOK()">--%>
<%--<div class="info">用户名可以使用数字,下划线,字母,汉字</div>--%>
<%--<br>--%>
<%--<span class="glyphicon glyphicon-lock"></span>--%>
<%--<input type="password" name="password" class="password" placeholder="请输入密码" onkeyup="ispwdOK()">--%>
<%--<div class="info" style="top:180px;">密码必须包含英文字母和数字,不能少于8位,还可以使用下划线</div>--%>
<%--<br>--%>
<%--<div class="scrollCheck">--%>
<%--    <div class="textwan">完成拼图验证</div>--%>
<%--    <button class="changeone" onclick="change()">换一张</button>--%>
<%--    <button id="close" onclick="close_()">×</button>--%>
<%--    <div id="img_">--%>
<%--        <img src="static/img/c14.png" id="_1">--%>
<%--        <img id="_1_" src="static/img/c14_14.png" style="position: absolute;top:23px;left:0px;">--%>
<%--    </div>--%>
<%--    <div id="scroll" class="scroll">--%>
<%--        向右滑动完成拼图--%>
<%--        <div id="bbox">--%>
<%--            <div id="bow" class="bow"></div>--%>
<%--        </div>--%>
<%--    </div>--%>
<%--    <div class="scroll" id="scroll2"></div>--%>
<%--    <div class="sanjiao"></div>--%>
<%--</div>--%>
<%--<br>--%>
<%--<div class="button" style="text-align: center;">--%>
<%--    <button onclick="registed()">register</button>--%>
<%--</div>--%>